<template>
  <div class="line-style-config">
    <el-form label-width="120px" class="sub-form">
      <!-- 线条颜色 -->
      <el-form-item label="线条颜色">
        <el-color-picker v-model="lineStyle.stroke" @change="onLineStyleChange" />
      </el-form-item>
      
      <!-- 线条粗细 -->
      <el-form-item label="线条粗细">
        <el-input-number 
          v-model="lineStyle.strokeWidth" 
          :min="1" 
          :max="10" 
          @change="onLineStyleChange" 
        />
      </el-form-item>
      
      <!-- 线条类型 -->
      <el-form-item label="线条类型">
        <el-select v-model="lineStyle.lineType" @change="onLineStyleChange">
          <el-option label="曲线" value="smoothstep" />
          <el-option label="直线" value="straight" />
          <el-option label="折线" value="step" />
          <el-option label="贝塞尔曲线" value="bezier" />
        </el-select>
      </el-form-item>
      
      <!-- 是否虚线 -->
      <el-form-item label="线条样式">
        <el-radio-group v-model="lineStyle.dashed" @change="onLineStyleChange">
          <el-radio :label="false">实线</el-radio>
          <el-radio :label="true">虚线</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <!-- 虚线样式 -->
      <el-form-item label="虚线样式" v-if="lineStyle.dashed">
        <el-select v-model="lineStyle.dashArray" @change="onLineStyleChange">
          <el-option label="短虚线" value="5,5" />
          <el-option label="长虚线" value="10,5" />
          <el-option label="点线" value="2,2" />
          <el-option label="点划线" value="10,2,2,2" />
        </el-select>
      </el-form-item>
      
      <!-- 是否动画 -->
      <el-form-item label="动画效果">
        <el-switch v-model="lineStyle.animated" @change="onLineStyleChange" />
      </el-form-item>
      
      <!-- 动画速度 -->
      <el-form-item label="动画速度" v-if="lineStyle.animated">
        <el-input-number 
          v-model="lineStyle.animationSpeed" 
          :min="1" 
          :max="10" 
          @change="onLineStyleChange" 
        />
      </el-form-item>
      
      <!-- 线条标签 -->
      <el-form-item label="线条标签">
        <el-input v-model="lineStyle.label" @input="onLineStyleChange" placeholder="线条标签" />
      </el-form-item>
      
      <!-- 标签位置 -->
      <el-form-item label="标签位置">
        <el-select v-model="lineStyle.labelPosition" @change="onLineStyleChange">
          <el-option label="中间" value="middle" />
          <el-option label="起点" value="start" />
          <el-option label="终点" value="end" />
        </el-select>
      </el-form-item>
      
      <!-- 标签颜色 -->
      <el-form-item label="标签颜色">
        <el-color-picker v-model="lineStyle.labelColor" @change="onLineStyleChange" />
      </el-form-item>
      
      <!-- 标签大小 -->
      <el-form-item label="标签大小">
        <el-input-number 
          v-model="lineStyle.labelSize" 
          :min="10" 
          :max="20" 
          @change="onLineStyleChange" 
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  lineStyle: {
    type: Object,
    default: () => ({
      stroke: '#b1b1b7',
      strokeWidth: 3,
      lineType: 'smoothstep',
      dashed: false,
      dashArray: '5,5',
      animated: false,
      animationSpeed: 5,
      label: '',
      labelPosition: 'middle',
      labelColor: '#333333',
      labelSize: 12
    })
  }
})

const emit = defineEmits(['change'])

const lineStyle = ref({ ...props.lineStyle })

watch(lineStyle, (newVal) => {
  emit('change', newVal)
}, { deep: true })

function onLineStyleChange() {
  emit('change', lineStyle.value)
}
</script>

<style scoped>
.line-style-config {
  width: 100%;
}

.sub-form .el-form-item {
  margin-bottom: 12px;
}
</style> 